<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>使用bootstrap绘制form表单</title>
<!-- Bootstrap core CSS -->
<link
	href="${pageContext.servletContext.contextPath}/static/plugins/bootstrap-3.3.7-dist/css/bootstrap.min.css"
	rel="stylesheet">
<link
	href="${pageContext.servletContext.contextPath}/static/plugins/bootstrap-3.3.7-dist/css/bootstrap-theme.min.css"
	rel="stylesheet">
<!-- bootstrap-datepicker-1.9.0-dist -->
<link
	href="${pageContext.servletContext.contextPath}/static/plugins/bootstrap-datepicker-1.9.0-dist/css/bootstrap-datepicker.min.css"
	rel="stylesheet">
	
<!-- Bootstrap core JavaScript-->
<!-- Placed at the end of the document so the pages load faster -->
<!--import jquery before bootstrap javascript-->
<script
	src="${pageContext.servletContext.contextPath}/static/plugins/jquery-1.12.4/jquery-1.12.4.min.js"></script>
<script
	src="${pageContext.servletContext.contextPath}/static/plugins/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<!-- bootstrap-datepicker-1.9.0-dist -->
<script
	src="${pageContext.servletContext.contextPath}/static/plugins/bootstrap-datepicker-1.9.0-dist/js/bootstrap-datepicker.min.js"></script>

<script
	src="${pageContext.servletContext.contextPath}/static/plugins/bootstrap-datepicker-1.9.0-dist/locales/bootstrap-datepicker.zh-CN.min.js"></script>
<!-- My97DatePicker -->
<script
	src="${pageContext.servletContext.contextPath}/static/plugins/My97DatePicker/WdatePicker.js"></script>

<script
	src="${pageContext.servletContext.contextPath}/static/plugins/BootstrapEx/js/bootstrapEx.js"></script>

<script type="text/javascript">
	
	// 删除按钮点击触发的事件:用于发送删除请求
	function deleteMe(c_Time,T_id){
		// 使用确认框，确认用户是否需要进行删除操作
		var r=confirm("您确认删除该记录么?")
		  if (r==true){
			// 使用get方式发送请求
			window.location.href = "UserInfoDeletingControl?uid=" + userId;
		    }
		
	}
	
	///////////////////////////////////////////////////////////
	///// ajax查询
	
	function doAjaxQuery(){
		// 使用ajax进行查询
		$.ajax({
				// 请求类型
			   type: "POST",
				// 请求的url，和form的action属性值一样
			   url: "${pageContext.servletContext.contextPath}/CourseInfoAjaxQueryControl",
				// 发送的表单数据，按照如下格式提供即可："name=John&location=Boston"
			   data:  $("#form1").serialize(), // 序列化表单参数，获取一个序列化的字符串，用于ajax请求，必须在form中才可以使用
			   // response响应的数据类型，默认是文本类型，可以指定为 xml、html、json等类型
			   dataType:"json",
			   // 回调函数
			   success: function(data, textStatus, jqXHR){

			     //console.info("回调结果：");
			     //console.info(data);
			     // 进行dom操作，局部修改浏览器的显示数据，进行局部刷新数据
				 if(data != null){
					 //console.info("hhhhh");
					 // 此处 json对象data是一个数组类型，所有可以使用form循环进行遍历
					 /* for(var i=0;i<data.length;i++){
						 console.info(data[i]);
						 // 此处 data[i] 是json对象中的一个元素，该元素是一个一个对象类型，可以使用.操作符获取指定属性的值
						 console.info(data[i].user_Name);
						 console.info(data[i]["user_Name"]);
					 } */
					 
					 // 组合的html内容穿
					 var strHtml = "";
					 $.each( data, function(index, eachVal){
						  // 此处的eachVal是被遍历的结果集 data中的一个元素
						  // 根据后台封装的结果集结构，eachVal是一个实体类对象
						  					  
						  strHtml+="<tr>";
						  
						  strHtml+="<th scope='row'>"
						  strHtml+=(index+1);
						  strHtml+="</th>";
						  
						  strHtml+="<td>";
						  strHtml+=eachVal.c_Name;
						  strHtml+="</td>";
						  
						  strHtml+="<td>";
						  strHtml+=eachVal.c_Date;
						  strHtml+="</td>";
						  
						  strHtml+="<td>";
						  strHtml+=eachVal.c_Time;
						  strHtml+="</td>";
						  
						  strHtml+="<td>";
						  strHtml+=eachVal.c_Con;
						  strHtml+="</td>";
						  
						  strHtml+="<td>";
						  strHtml+=eachVal.c_Place;
						  strHtml+="</td>";
						  
						  // 修改按钮
						  strHtml+="<td><button type='button' class='btn btn-default' onclick='doModifyClick("+eachVal.user_Id+")'>修改</button></td>";
						  // 删除按钮
						  strHtml+="<td><button type='button' class='btn btn-default' onclick='deleteMe("+eachVal.user_Id+")'>删除</button></td>";
						  strHtml+="</tr>";;
						});
					 // end each遍历方法
					 // 将要显示的html，使用dom操作，添加到tbody标签中
					 $("#tbody1").html(strHtml);
				 }else{
					 alart("未查询到结果");
				 }
			   }

			});
	}
	
	
	//////////////////////////////////////////////////////////
	// 修改按钮的点击事件

	function doModifyClick(userId) {
		var Modal3;
		//Modal嵌入页签页
		// 初始化
		// 使用jquery在当前页面的dom中追加了一个div，用于绘制弹出框
		$(document.body).append('<div id="modal3"></div>');
		Modal3 = new Modal();
		Modal3.renderto = "#modal3"; // 当前绘制的modal模态框的id
		Modal3.InitShow = true;
		Modal3.btns = [ { // 只保留  修改 关闭按钮
			id : "closebtn"
		} ]
		tab1 = new Tab();
		Modal3.OnfirstInited = function(thismodal) {
			tab1.tabs = [ {
				id : "tabs1",
				title : "修改",
				active : true,
				isiframe : true,
				url : "${pageContext.servletContext.contextPath}/JumpU?pg=WEB-INF/pages/info/courseInfoModify.jsp&uid="+userId
			}];
			tab1.renderto = thismodal.body;
			tab1.Init();
		}
		// 初始化结束
		
		// 显示模态框
		Modal3.show();
		
	}
	
	//模态框的事件处理   注意格式为 绘制的modal的id值，是 renderto属性的值，格式为： 绘制的modal的ID_+事件名称之间触发，不需要绑定
	// 模态框的关闭事件
	function modal3_Hide() {
		// 获取修改页面的form表单对象，然后使用submit方法提交表单到服务器
		//$("body").find('#modal3 iframe').contents().find("#modifyForm").submit();
		// 直接调用modal模态框中的form表单对象的submit事件，将表单提交到服务器；
		
		$('#modal3 iframe').contents().find("#modifyForm").submit();
		
        //alert("修改成功!"); 
    }
	
	// 模特框关闭之后触发的事件，重新进行ajax查询，刷新修改的数据	
	function modal3_Hideend() {
        // 重新查询数据,修改之后，将修改的新的数据显示在页面中
        doAjaxQuery();
        
    }
	
</script>

<style>
#maindiv {
	width: 80%;
	padding-top: 10px;
	/* margin: 0px, auto; */
	padding-left: 50px;
}
</style>
</head>
<body>
	<div id="maindiv">
		<div>
			<form id="form1" class="form-horizontal" >
				<div class="form-group">
					<label class="col-sm-4 control-label">课程名称</label>
					<div class="col-sm-4">
						<input type="text" class="form-control" id="txtCourseName"
							name="c_Name" placeholder="请输入课程名称">
					</div>
				</div>

				<div class="form-group">
					<div class="col-sm-offset-4 col-sm-2">
						<button type="button" id="btnQuery" class="btn btn-default"
							onclick="doAjaxQuery()">查询</button>
					</div>
					<div class="col-sm-offset-1 col-sm-1">
						<button type="reset" class="btn btn-default">重置</button>
					</div>
				</div>
			</form>
		</div>

		<!-- 显示查询结果部分-->
		<div class="row">

			<table class="table table-hover">
				<thead>
					<tr>
						<th>序号</th>
						<th>课程名称</th>
						<th>课程日期</th>
						<th>课程时间</th>
						<th>课程内容</th>
						<th>课程地点</th>
						<th>修改</th>
						<th>删除</th>
					</tr>
				</thead>
				<tbody id="tbody1">
				<!-- 此处根据ajax回调的结果数据集进行动态拼写html的内容 -->	
				</tbody>
			</table>
			
		</div>
		<div class="row">
		<div id="myPagination"></div>
		</div>
	</div>
</body>
</html>